import React from 'react'
import style from './index.module.scss'
import { connect } from 'react-redux'


class Index extends React.Component {
    state={
        activeMenu: '人气Top'
    }
    render() {
        return(
            <div className={style.menuBox}>
                 <div className={style.menu}>
                    {this.props.rMenu.map((item, key) => <div key={key} 
                        onClick={() => this.setState({
                            activeMenu: item
                        })}
                        className={[style.menuItem, item === this.state.activeMenu ? style.active : '' ].join(' ')}>
                        {item}
                    </div>)}
                </div>
                <div className={style.goodsBox}>
                    {
                        this.props.rList.filter(item => item.type === this.state.activeMenu).map((item, key) => <div className={style.good} key={key}>
                            <div>{item.name}</div>
                            <div className={style.han}>
                                <div className={style.left}>{item.price}</div>
                                <div className={style.right}>
                                    { item.num ? <button onClick={() => this.props.minus(item.name)}>-</button> : null}
                                    { item.num ? <span>{item.num}</span> : null}
                                    <button onClick={() => this.props.add(item.name)}>+</button>
                                </div>
                            </div>
                            
                        </div>)
                    }
                </div>

            </div>
        )
    }
}
const mapStateToProps = (store) => {
    return {
        rMenu: store.rMenu,
        rList: store.rList
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        add(name) {
            dispatch({
                type: 'ADD',
                name: name
            })
        },
        minus(name) {
            dispatch({
                type: 'MINUS',
                name: name
            })
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)